<template>
  <el-dialog
    v-model="visible"
    :title="title"
    width="800px"
    @close="handleClose"
  >
    <div class="dialog-content">
      <el-descriptions :column="1" border>
        <el-descriptions-item label="ID">{{ data.id }}</el-descriptions-item>
        <el-descriptions-item label="用户ID">{{ data.logUserId }}</el-descriptions-item>
        <el-descriptions-item label="用户类型">{{ data.logUserType }}</el-descriptions-item>
        <el-descriptions-item label="用户姓名">{{ data.logUserName }}</el-descriptions-item>
        <el-descriptions-item label="操作模块">{{ data.logModule }}</el-descriptions-item>
        <el-descriptions-item label="操作内容">{{ data.logContent }}</el-descriptions-item>
        <el-descriptions-item label="请求方法">{{ data.logMethod }}</el-descriptions-item>
        <el-descriptions-item label="操作时间">{{ formatDateTime(data.logExecuteTime) }}</el-descriptions-item>
        <el-descriptions-item label="操作结果">
          <DictTag 
            :dict-type="'1'" 
            :value="data.logSuccessFlag === 1 ? 2 : 1" 
            :fallback-text="data.logSuccessFlag === 1 ? '成功' : '失败'"
          />
        </el-descriptions-item>
        <el-descriptions-item label="IP地址">{{ data.logIp }}</el-descriptions-item>
        <el-descriptions-item label="客户端信息">{{ data.logUserAgent }}</el-descriptions-item>
        <el-descriptions-item label="耗时(ms)">{{ data.logConsumerTime }}</el-descriptions-item>
        <el-descriptions-item label="请求URL">{{ data.logUrl }}</el-descriptions-item>
        <el-descriptions-item label="请求参数">
          <pre class="param-content">{{ data.logRequestParam }}</pre>
        </el-descriptions-item>
        <el-descriptions-item label="返回参数">
          <pre class="param-content">{{ data.logResponseParam }}</pre>
        </el-descriptions-item>
        <el-descriptions-item label="监控信息">{{ data.logMonitorInfo }}</el-descriptions-item>
      </el-descriptions>
    </div>
    <template #footer>
      <el-button @click="visible = false">关闭</el-button>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'
import { DictTag } from '@/components/core/dics/index.vue'

const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false
  },
  title: {
    type: String,
    default: ''
  },
  data: {
    type: Object,
    default: () => ({})
  }
})

const visible = ref(false)

const emit = defineEmits(['update:modelValue'])

watch(() => props.modelValue, (val) => {
  visible.value = val
}, { immediate: true })

// 格式化日期时间
const formatDateTime = (datetime: string) => {
  if (!datetime) return ''
  
  if (datetime.length === 14 && /^\d{14}$/.test(datetime)) {
    const year = datetime.substring(0, 4)
    const month = datetime.substring(4, 6)
    const day = datetime.substring(6, 8)
    const hour = datetime.substring(8, 10)
    const minute = datetime.substring(10, 12)
    const second = datetime.substring(12, 14)
    
    return `${year}-${month}-${day} ${hour}:${minute}:${second}`
  }
  
  const date = new Date(datetime)
  if (isNaN(date.getTime())) return datetime
  
  const year = date.getFullYear()
  const month = String(date.getMonth() + 1).padStart(2, '0')
  const day = String(date.getDate()).padStart(2, '0')
  const hours = String(date.getHours()).padStart(2, '0')
  const minutes = String(date.getMinutes()).padStart(2, '0')
  const seconds = String(date.getSeconds()).padStart(2, '0')
  
  return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
}

const handleClose = () => {
  emit('update:modelValue', false)
}
</script>

<style scoped>
.param-content {
  white-space: pre-wrap;
  word-break: break-all;
  margin: 0;
  padding: 8px;
  background-color: var(--el-fill-color-light);
  border-radius: 4px;
  max-height: 200px;
  overflow-y: auto;
}
</style>